import React from 'react';
import { VolumeUp } from '@mui/icons-material';
import { Box, Typography, Chip } from '@mui/material';

interface SystemNotificationProps {
  title: string;
  message: string;
  time: string;
  isOfficial?: boolean;
}

const SystemNotification: React.FC<SystemNotificationProps> = ({
  title,
  message,
  time,
  isOfficial = false,
}) => {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        padding: 2,
        gap: 2,
        borderBottom: '1px solid #f0f0f0',
        '&:hover': {
          backgroundColor: '#f5f5f5',
        },
      }}
    >
      {/* 图标 */}
      <Box
        sx={{
          width: 48,
          height: 48,
          borderRadius: '50%',
          background: 'linear-gradient(45deg, #FFB6C1, #FFC0CB)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <VolumeUp sx={{ color: '#fff', fontSize: 24 }} />
      </Box>

      {/* 内容区域 */}
      <Box sx={{ flex: 1 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
          <Typography variant="subtitle1" component="span">
            {title}
          </Typography>
          {isOfficial && (
            <Chip
              label="官方"
              size="small"
              sx={{
                backgroundColor: '#f56c6c',
                color: '#fff',
                height: 20,
                fontSize: '12px',
              }}
            />
          )}
        </Box>
        <Typography variant="body2" color="text.secondary">
          {message}
        </Typography>
      </Box>

      {/* 时间 */}
      <Typography variant="caption" color="text.secondary" sx={{ minWidth: 80, textAlign: 'right' }}>
        {time}
      </Typography>
    </Box>
  );
};

export default SystemNotification; 